<script setup lang="ts">
import {reactive,ref} from 'vue'
const price = 10
const anim ="小狗"
const per = "人"

// 声明函数
const getContent = ()=>{
  return "Vue3啦啦啦"
}
// 定义一个点击事件的函数
const clickFn =(a:number,b:number,c:number) =>{
  alert("dian"+a)
}
const changeValue = (event:Event)=>{
  const inputDom = event.target as HTMLInputElement
  console.log("值改变了",inputDom.value)
}
const enterClick = (event:Event)=>{
  const obj = event as KeyboardEvent
  if(obj.key == "Enter"){
    alert("回车")
  }
}
// 改变性别
const changeSex = ()=>{
  person.sex = '女'
}
const groupPeople = () => {
  people.value.money -= 100000
  people.value.childCount += 1
  people.value.weight += 10
  people.value.height -= 2
}
// 人类对象
const person = reactive<{
  name:string,
  age:number,
  sex:'男'| '女'
}>({
  name:"zhangs",
  age:24,
  sex:'男'
})
// ref声明 简单或复杂数据类型
const isMarried = ref(false)
const people = ref<{name:string,height:number,weight:number,money:number,childCount:number}>({
  name:'白日梦想家',
  height:183,
  weight:80,
  money:100000,
  childCount:1
})

</script>

<template>
  <div class="container">
    <!-- 插值表达式 -->
   {{ (per + "Vue3").split("").reverse().join("") }}
   <p>总价：{{ price*20 }}</p>
   <p>动物：{{ anim }}</p>
   <p>前：{{ price || "穷光蛋" }}</p>
   <p>函数调用:{{ getContent() }}</p>
   <p>{{ 1+6 }}</p>
   <button v-on:click="clickFn(1,2,3)">测试</button>
   <!-- 完整写法v-on:事件名="方法名" -->
   <!-- 语法糖的写法 @click -->
   <button @click="clickFn(1,2,3)">测试</button>
   <input type="text" @change="changeValue" @keydown="enterClick">
   <h1>响应式数据Reactive</h1>
   <p>姓名：{{ person.name }}</p>
   <p>年龄{{ person.age }}</p>
   <p>性别{{ person.sex }}</p>
   <button @click="person.sex = '女'">变性别</button>
   <button @click="changeSex">变性别</button>
   <h1>Ref响应式数据-复杂数据类型</h1>
    <p>姓名：{{ people.name }}</p>
    <p>身高{{ people.height }}cm</p>
    <p>体重{{ people.weight }}kg</p>
    <p>财产：{{ people.money }}$</p>
    <p>儿女个数：{{ people.childCount }}个</p>
    <button @click="groupPeople">成长</button>

</div>
</template>

<style scoped>
.container{
  font-size: 30px;
  font-weight: bolder;
  color:blue;
}

</style>
